// *********************** 1.初始化富文本编辑器
initEditor();

// *********************** 2.裁剪图片区域
// 2.1 实现基本效果
// 2.1.1 初始化图片裁剪器
var $image = $('#image')
// 2.1.2 裁剪选项
var options = {
  aspectRatio: 400 / 280,
  preview: '.img-preview'
}
// 2.1.3 初始化裁剪区域
$image.cropper(options)

// *********************** 3.分类列表下拉框
let form = layui.form;
// 3.1 调用获取分类接口
$.ajax({
  url:'/my/article/cates',
  success:function(res){
    // 3.2 获取成功 - 模板引擎渲染下拉框
    var optList = template('tpl-opt',res);//res={status: ,message:'',data:[]}
    $('select').append(optList);
    // 3.3 更新渲染 - 动态插入的表单元素 layUI form模块自动渲染失效
    form.render('select')
  }
})

// *********************** 4.实现点击上传图片
// 4.1 上传图片功能 - 点击button按钮 ,触发文件域
  // 4.1.1 绑定点击按钮事件
$('button:contains("选择封面")').on('click',function(){
  // 4.1.2 触发文件域
  $('input[type=file]').trigger('click');
})
// 4.2 更换图片功能
  // 4.2.1 绑定文件域change事件
  $('input[type=file]').on('change',function(){
    // 4.2.2 获取文件对象 
    // console.log($(this));
    // let fileObj = $(this)[0].files[0]; //$(this)[0]是把JQ对象转换为JS对象,简写为this
    let fileObj = this.files[0]
    console.log(fileObj);
    // 4.2.3 创建临时URL
    let fileURL = URL.createObjectURL(fileObj);
    // 4.2.4 更换图片 - 移除剪裁区→设置新图片路径→初始化剪裁区
    $image.cropper('destroy').attr('src',fileURL).cropper(options)
  })

  // *********************** 5.实现发布文章功能
  // 5.1 绑定表单 提交事件
  $('form').on('submit',function(e){
    // 5.2 阻止表单的默认提交行为
    e.preventDefault();
    // 5.3 通过FormData获取表单数据 - 根据name属性
    let fd = new FormData(this);
      // 检验获取的数据
      //fd.forEach((val,key)=>{console.log(key,val);}) //有content但是值为空 图片数据需要转为二进制数据

    // 5.4 更改文章内容数据
    // 5.4.1 获取文章内容数据 - 用了富文本插件不能直接获取到(百度)
    let newContent = tinyMCE.activeEditor.getContent()
    // 5.4.2 更改fd中的数据
    fd.set('content',newContent)
      // 再次检验获取的数据
      //fd.forEach((val,key)=>{console.log(key,val);}) //content有值了

    // 5.5 添加封面图片数据
    // 5.5.1 创建画布
    let canvas = $image.cropper('getCroppedCanvas',{
      width:400 ,
      height:280,
    });
    // 5.5.2 把画布内容转换为	blob二进制文件 
    // 异步方法(所以把ajax请求嵌套在里边)
    canvas.toBlob(function(bl){ //转换后的操作 ,参数代表转换后的数据
      // 5.5.3 向fd中追加
      fd.append('cover_img',bl);
        // 再次检验获取的数据
        //fd.forEach((val,key)=>{console.log(key,val);})//有图片数据了

      //5.6 调用发表文章接口
      $.ajax({
        type:'POST',
        url:'/my/article/add',
        data:fd,
        // 5.6.1 使用FormData数据时必添
        processData:false,
        contentType:false,
        success:function(res){
          // 5.6.2 layui提示框
          layer.msg(res.message);
          // 5.6.3 成功时跳转到文章列表页面
          if(res.status == 0){
            location.href = '/article/article.html'
          }
        }
      })
    })
  })